<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11 -->
    <meta http-equiv="Accept-CH" content="Sec-CH-UA-Platform-Version" />
    <meta http-equiv="Critical-CH" content="Sec-CH-UA-Platform-Version" />
    <link
      rel="icon"
      href="https://cdn.jsdelivr.net/gh/VSCodeConfigHelper/v4@main/public/favicon.png"
    />

    <!-- Bootstrap CSS -->
    <link
      href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- <link href="https://unpkg.com/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css" rel="stylesheet"> -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
    />

    <title>VS Code Config Helper 4</title>

    <style>
      html,
      body {
        width: 100vw;
        overflow-x: hidden;
      }
      section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 2rem;
      }
      section:not(:first-child) {
        padding-top: 2rem;
      }
      section:nth-child(even):not(:last-child) {
        background-color: #f5f5f5;
      }
      section > * {
        width: calc(100% - 2rem);
      }
      .footer {
        background-color: #333333;
        color: white;
      }
      .footer a {
        color: white;
      }
      .footer a:hover {
        color: #b4a0ff;
      }
      /* Justify content width. Values come from Bootstrap's `.container` */
      @media (min-width: 576px) {
        section > * {
          max-width: 540px;
        }
      }
      @media (min-width: 768px) {
        section > * {
          max-width: 720px;
        }
      }
      @media (min-width: 992px) {
        section > * {
          max-width: 960px;
        }
      }
      @media (min-width: 1400px) {
        section > * {
          max-width: 1320px;
        }
      }
      @media (min-width: 1200px) {
        section > * {
          max-width: 1140px;
        }
      }
      .hero {
        padding-top: 80px;
        width: 100vw;
        overflow-x: visible;
      }
      @media (min-width: 992px) {
        .hero {
          min-height: calc(100vh - 2rem);
          padding-bottom: 80px;
        }
      }
      .logo {
        height: calc(1.325rem + 0.9vw);
      }
      .compiler-img-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 2rem;
      }
      /* Push images into center. justify-content won't work with overflow */
      .compiler-img-container::before,
      .compiler-img-container::after {
        content: "";
        margin: auto;
      }
      .compiler-img {
        flex: 0 0 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .compiler-img > img,
      .os-img > img {
        height: 100px;
      }
      .compiler-img > span, .compiler-img > a {
        color: #6c757d;
        text-align: center;
      }
      .os-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 150px;
      }
      .os-img a {
        margin-top: 1rem;
        width: 100%;
      }
      #windowFrame {
        float: left;
        width: 728px;
        height: 728px;
        transform: scale(0.75);
        transform-origin: 0 0;
        margin-bottom: -182px;
      }
      @media (min-height: 728px) {
        #windowFrame {
          transform-origin: 0 50%;
          margin-bottom: unset;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <div class="hero row">
          <div
            class="col col-sm-8 col-lg-6 d-flex flex-column justify-content-between py-lg-5"
          >
            <div>
              <div class="d-flex flex-row gap-3 mb-2 align-items-center">
                <img
                  class="logo"
                  src="https://cdn.jsdelivr.net/gh/VSCodeConfigHelper/v4@main/public/favicon.png"
                  alt="logo"
                />
                <h2 class="m-0">VS Code Config Helper</h2>
                <span class="badge rounded-pill bg-danger"> v4 </span>
              </div>
              <h1 class="display-3">功能强大的 VS Code C++ 配置器</h1>
              <div class="text-muted lead my-3">
                若你想使用 VS Code 编写 C/C++ 代码，VS Code Config Helper
                可以帮你完成所有准备工作。不再为繁琐的配置流程发愁！
              </div>
            </div>
            <div class="d-flex flex-row gap-4 flex-wrap">
              <a
                href="https://github.com/VSCodeConfigHelper/v4/releases"
                target="_blank"
                class="btn btn-lg btn-primary"
                id="downloadBtn"
              >
                <i class="bi-download"></i>
                &nbsp;下载
            </a>
              <a
                type="button"
                class="btn btn-lg btn-light"
                href="./docs"
                target="_blank"
              >
                文档
              </a>
            </div>
          </div>
          <div
            class="d-none col-lg-6 d-lg-flex flex-column justify-content-center align-items-start mt-3 mt-lg-0"
          >
            <div>
              <iframe id="windowFrame" src="./window.html"></iframe>
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3 class="mb-3">一站式服务，又快又省心</h3>
        <p>
          从编译器、环境变量，到 VS Code 扩展、<code>.vscode</code> 配置文件，本工具统统包揽，你不再需要为他们操心。
          <ul>
            <li>工具自动检测当前安装的编译环境；如果没有则提供下载链接或安装方式。</li>
            <li>选择工作文件夹后，工具自动生成 <code>.vscode</code> 内的 JSON 配置文件。</li>
            <li>工具自动完成安装扩展、修改环境变量等操作。 此外，工具还提供生成测试文件、生成桌面快捷方式 <small>（仅 Windows）</small> 等功能。</li>
          </ul>
        </p>
      </section>
      <section>
        <h3 class="mb-3">独创的弹窗运行样式</h3>
        <p>
          <img class="float-end" src="https://cdn.jsdelivr.net/gh/VSCodeConfigHelper/v2@v2.x/docs/assets/external.png" alt="external window">
          不同于网络上的其它配置教程，本工具开创性地利用 VS Code Tasks
          功能，生成美观、易用、高效的“弹窗运行”样式配置。 当运行 C/C++
          程序时，工具将启动一个类似 Visual Studio / Code Block
          的弹窗以进行程序的输入输出。
        </p>
        <p class="text-muted">
          ※ 同时提供与传统行为一致的、基于调试器的内置终端运行。
          在工具中启用“兼容模式”以应用该样式。
        </p>
      </section>
      <section>
        <h3 class="mb-3">支持所有主流编译平台</h3>
        <div class="compiler-img-container">
          <div class="compiler-img">
            <img src="assets/mingw64.png" />
            <span>MinGW</span>
          </div>
          <div class="compiler-img">
            <img src="assets/clang64.png" />
            <span>LLVM-MinGW</span>
          </div>
          <div class="compiler-img">
            <img src="assets/vs.png" />
            <span>Visual C++</span>
          </div>
          <div class="compiler-img">
            <img src="assets/gcc.png" />
            <a href="./docs/linux">GCC</a>
          </div>
          <div class="compiler-img">
            <img src="assets/llvm.png" />
            <a href="./docs/linux">Clang</a>
          </div>
          <div class="compiler-img">
            <img src="assets/xcode.png" />
            <a href="./docs/macos">Apple Clang</a>
          </div>
        </div>
      </section>
      <section>
        <h3 class="mb-3">统计数据</h3>
          <p>
            此工具已成功配置 <span class="h3" id="v4Count">0</span> 次（第 4 版）。
            <span class="text-muted">第 2、3 版已成功配置 <span id="v3Count">0</span> 次。</span>
          </p>
      </section>
      <section>
        <h3 class="mb-3" id="download">下载</h3>
        <div class="row justify-content-center">
          <div class="col-md-6 d-flex flex-row justify-content-between gap-3">
            <div class="os-img">
              <img src="assets/windows.png" />
              <div>
                <a target="_blank" class="dl-btn btn btn-primary" data-type="exe">
                  单文件(.exe)
                </a>
                <small class="text-muted">需要 WebView2 运行时</small>
                <a target="_blank" class="dl-btn btn btn-secondary" data-type="msi">
                  安装器(.msi)
                </a>
              </div>
            </div>
            <div class="os-img">
              <img src="assets/linux.png" />
              <div>
                <a target="_blank" class="dl-btn btn btn-primary" data-type="appImage">
                  单文件(.AppImage)
                </a>
                <a target="_blank" class="dl-btn btn btn-secondary" data-type="elf">
                  可执行文件
                </a>
              </div>
            </div>
            <div class="os-img">
              <img src="assets/apple.png" />
              <div>
                <a target="_blank" class="dl-btn btn btn-primary" data-type="dmg">
                  镜像(.dmg)
                </a>
                <a target="_blank" class="dl-btn btn btn-secondary" data-type="macho">
                  可执行文件
                </a>
                <small class="text-muted">需要在安全设置中允许运行</small>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section>
        <p class="text-muted">
          VS Code Config Helper
          是自由软件：你可以再分发之和/或依照由自由软件基金会发布的 GNU
          通用公共许可证修改之，无论是版本 3
          许可证，还是（按你的决定）任何以后版都可以。<br />
          发布该程序是希望它能有用，但是并无保障；甚至连可销售和符合某个特定的目的都不保证。
          请参看 GNU 通用公共许可证，了解详情。<br />
          你应该随程序获得一份 GNU 通用公共许可证的复本。 如果没有，请看
          <a href="https://www.gnu.org/licenses/">
            https://www.gnu.org/licenses/
          </a>
          。
        </p>
        <p>本项目源代码可在 <a href="https://github.com/VSCodeConfigHelper/v4" target="_blank" rel="noopenner">GitHub</a> 获取。</p>
      </section>
      <section class="footer">
        <div>
          <span>
            <a target="_blank" rel="noopenner" href="https://v2.vscch.tk"
              >版本 2.x</a
            >
            <a target="_blank" rel="noopenner" href="https://v3.vscch.tk"
              >版本 3.x</a
            >
            &copy;
            <a
              target="_blank"
              rel="noopenner"
              href="https://guyutongxue.github.io"
              >Guyutongxue</a
            >
            2022
          </span>
        </div>
      </section>
    </main>
    <script src="https://unpkg.com/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/ua-parser-js@1.0.2/dist/ua-parser.min.js"></script>
    <script type="module">
      const parser = new UAParser();
      const windows = ["Windows"];
      const mac = ["Mac OS"];
      const linux = [
        "Linux",
        "Debian",
        "Ubuntu",
        "Deepin",
        "elementary OS",
        "Raspbian",
      ];
      const os = parser.getOS();
      let downloadName = null;
      let downloadType = null;
      if (windows.includes(os.name)) {
        downloadName = "Windows 版下载";
        downloadType = "exe";
      } else if (mac.includes(os.name)) {
        downloadName = "macOS 版下载";
        downloadType = "dmg";
      } else if (linux.includes(os.name)) {
        downloadName = "Linux 版下载";
        downloadType = "appImage";
      }
      function withProxy(/** @type {string} */ url) {
        const proxyUrl = new URL("https://api.guyutongxue.site/proxy");
        proxyUrl.searchParams.append("target", url);
        return proxyUrl.href;
      }
      const DOWNLOAD_LINKS = {};
      Promise.all(
        [
          `//api.guyutongxue.site/vscch/installer`,
          `//api.guyutongxue.site/vscch/portable`,
        ].map((url) => fetch(url).then((r) => r.json()))
      ).then(([i, p]) => {
        DOWNLOAD_LINKS.msi = i.platforms.win64.url;
        DOWNLOAD_LINKS.exe = p.platforms.win64.url;
        DOWNLOAD_LINKS.appImage = i.platforms.linux.url;
        DOWNLOAD_LINKS.elf = p.platforms.linux.url;
        DOWNLOAD_LINKS.dmg = i.platforms.darwin.url;
        DOWNLOAD_LINKS.macho = p.platforms.darwin.url;
      }).then(() => {
        /** @type {HTMLAnchorElement} */
        const btn = document.querySelector("#downloadBtn");
        if (downloadName !== null) {
          btn.innerHTML = `<i class="bi-download"></i>&nbsp;` + downloadName;
          btn.href = withProxy(DOWNLOAD_LINKS[downloadType]);
        } else {
          btn.classList.add("disabled");
          btn.innerHTML = `不支持此操作系统`;
        }
        document.querySelectorAll(".dl-btn").forEach((/** @type {HTMLAnchorElement} */ ele) => {
          const downloadType = ele.getAttribute("data-type");
          ele.href = withProxy(DOWNLOAD_LINKS[downloadType]);
        });
      });

      Promise.all([
        "https://api.countapi.xyz/get/v4.vscch.tk/linux",
        "https://api.countapi.xyz/get/v4.vscch.tk/macos",
        "https://api.countapi.xyz/get/v4.vscch.tk/windows",
      ].map(s => fetch(s).then(r => r.json()))).then(([l, m, w]) => {
        console.log({ l, m, w });
        document.querySelector("#v4Count").innerHTML = `${l.value + m.value + w.value}`;
      });
      fetch("https://api.countapi.xyz/get/guyutongxue.github.io/b54f2252-e54a-4bd0-b4c2-33b47db6aa98").then(r => r.json()).then(v => {
        document.querySelector("#v3Count").innerHTML = `${v.value}`;
      })
    </script>
  </body>
</html>
